<template>
  <div class="wrap">
    <div class="login-card">
      <h1>{{ isRegister ? "注册" : "登录" }}</h1>
      <form @submit.prevent="handleSubmit">
        <div class="input-group">
          <label for="username">用户名</label>
          <input
              v-model="form.username"
              type="text"
              id="username"
              placeholder="请输入用户名"
              required
          />
        </div>
        <div class="input-group">
          <label for="userpwd">密码</label>
          <input
              v-model="form.userpwd"
              type="password"
              id="userpwd"
              placeholder="请输入密码"
              required
          />
        </div>
        <div v-if="isRegister" class="input-group">
          <label for="mobile">手机号</label>
          <input
              v-model="form.mobile"
              type="mobile"
              id="mobile"
              placeholder="请输入手机号"
              required
          />
        </div>
        <div v-if="isRegister" class="input-group">
          <label for="company">公司名</label>
          <input
              v-model="form.company"
              type="company"
              id="company"
              placeholder="请输入公司名称"
              required
          />
        </div>
        <button type="submit">{{ isRegister ? "注册" : "登录" }}</button>
      </form>
      <div class="toggle-mode" sy>
        <span>{{ isRegister ? "已有账号？" : "没有账号？" }}</span>
        <button @click="toggleMode" type="button">
          {{ isRegister ? "登录" : "注册" }}
        </button>
        <button @click="help" type="button">
          操作视频
        </button>
      </div>
    </div>
    <div v-if="showHelp" class="video">
      <div >
        <div style="height: 70vh;width: 80vw;text-align: center;margin-top: 10px;">
          <div style="background: #2db7f5;padding: 10px;margin-bottom: 10px;">{{videoTitle}}</div>

          <video ref="videoPlayer" controls width="800"  v-if="showVideo">
            <source :src="videoSrc" type="video/webm">
          </video>
        </div>
        <div style="display: flex;padding-right: 30px;padding-left: 20px;">
          <j-button @click="changeVideo('smzc.webm', '扫描装车')">扫描装车</j-button>
          <j-button @click="changeVideo('rk.webm','入库')">入库</j-button>
          <j-button @click="changeVideo('qrsh.webm','确认送货')">确认送货</j-button>
          <j-button @click="changeVideo('spxz.webm','商品新增')">商品新增</j-button>
          <j-button style="background: red;color: white;" @click="showHelp=false">关闭</j-button>
        </div>
      </div>


    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import tool from "@/utils/tool.js";
import Cookies from "js-cookie";
import {useRouter} from "vue-router";
import {TinyDialogBox} from "@opentiny/vue";
const isRegister = ref(false);
const router = useRouter()
const form = ref({
  username: '',
  userpwd: '',
  mobile: '',
  company: '',
})
onMounted(() => {
  let token = tool.Session.get('token')
  let user = tool.data.getUser()
  if(token && user) {
    //  router.push({name: 'cargoquick'})
  }
  window.ocrlogin = ocrlogin
  // 取json文件用户名密码保存到输入
  getUserFormPy()
})
const videoSrc = ref('https://download.sanzhiyun.cn/video/扫描装车.mp4')
const videoTitle = ref('扫描装车')
const showHelp = ref(false)
const showVideo = ref(false)
const changeVideo = (name, title) => {
  showVideo.value = false
  setTimeout(() => {
    videoTitle.value = title
    videoSrc.value = 'https://download.sanzhiyun.cn/video/'+name
    showVideo.value = true
  }, 100)

}
const handleSubmit = () => {
  if (isRegister.value) {
    regUp()
  } else {
    submitForm()
  }
}
const toggleMode = () => {
  isRegister.value = !isRegister.value;
  form.value = { username: "", userpwd: "", mobile: "",company:"" }; // 清空表单
}
const regUp = () => {
  if(!form.value.username) return tool.err('请输入用户名')
  if(!form.value.userpwd) return tool.err('请输入密码')
  if(!form.value.mobile) return tool.err('请输入手机号')
  if(!form.value.company) return tool.err('请输入公司名称')
  tool.suc('注册成功')
  tool.post('justdeliver/userReg', form.value).then(ret => {
    if(ret.stat) {
      form.value.mobile = ''
      form.value.company = ''
      tool.suc('注册成功，请登录')
      toggleMode()
    }
  })
}
const getUserFormPy = () => {
  if(typeof qt !== 'undefined') {
    new QWebChannel(qt.webChannelTransport, (channel) => {
      // 获取 Python 中注册的对象
      window.bridge = channel.objects.bridge;
      let rs = {
        name: "getUser"
      }
      window.bridge.send_message(JSON.stringify(rs), (response) => {
        if(response) {
          let arr = response.split(',')
          if(arr.length === 2) {
            form.value.username = arr[0]
            form.value.userpwd = tool.decodeStr(arr[1])
          }
        }
      })
    });
  }
}
// 保存图片识别配置
const savePySets = () => {
  if(typeof qt !== 'undefined') {
    new QWebChannel(qt.webChannelTransport, function (channel) {
      // 获取 Python 中注册的对象
      window.bridge = channel.objects.bridge;
      let obj = {
        name: "saveSets"
      }
      window.bridge.send_message(JSON.stringify(obj), function (response) {

      })
    })
  }
}
// 保存到python
const saveUserToPy = (user, pwd) => {
  if(typeof qt !== 'undefined') {
    new QWebChannel(qt.webChannelTransport, function (channel) {
      // 获取 Python 中注册的对象
      window.bridge = channel.objects.bridge;
      let rs = {
        name: "saveUserToPy",
        data: {
          user,
          pwd
        }
      }
      window.bridge.send_message(JSON.stringify(rs), function (response) {})
    })
  }
}
const ocrlogin = (params) => {
  let ret = JSON.parse(JSON.stringify(params))
  form.value.username = ret.username
  form.value.userpwd = ret.pwd
}
const submitForm = () => {
  let obj = {
    username: form.value.username,
    userpwd: tool.crypto.MD5(form.value.userpwd)
  }
  tool.post('user/login', obj).then(ret => {
    if (ret.stat) {
      let info = ret.data
      tool.data.setUser(info)
      // 存储 token 到浏览器缓存
      tool.Session.set('token', info.token);
      Cookies.set('usernamePs', info.username);
      let enuser = form.value.username
      let pwd = tool.encodeStr(form.value.userpwd)
      saveUserToPy(enuser, pwd)
      setTimeout(() => {
        savePySets()
      }, 100)
      setTimeout(() => {
        router.push({name: 'cargoquick'})
      }, 300)
    }
  })
}

const help = () => {
  showHelp.value = true
}

</script>
<style scoped lang="scss">
.video {
  position: absolute;
  top: 10px;
  height: 80vh;
  background: white;
}

.wrap {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #1e1e2f, #2a2a40);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 20px);
}

/* 登录卡片 */
.login-card {
  background: rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 10px;
  //box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 300px;
  text-align: center;
}

.login-card h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #00ffcc;
}

/* 输入框样式 */
.input-group {
  margin-bottom: 1rem;
  text-align: left;
}

.input-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #ccc;
}

.input-group input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}

.input-group input:focus {
  border-color: #00ffcc;
}

/* 按钮样式 */
button {
  width: 100%;
  padding: 0.75rem;
  background: #00ffcc;
  border: none;
  border-radius: 5px;
  color: #1e1e2f;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #00e6b8;
}

/* 切换模式链接 */
.toggle-mode {
  margin-top: 1rem;
  color: #ccc;
}

.toggle-mode button {
  background: none;
  border: none;
  color: #00ffcc;
  cursor: pointer;
  text-decoration: underline;
}

.toggle-mode button:hover {
  color: #00e6b8;
}
</style>